<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      title="新增根节点"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <!-- 租户编码   （编辑页面时此字段不可编辑） -->
        <a-form-model-item ref="tenantCode" label="租户编码" prop="tenantCode">
          <a-input
            v-model="form.tenantCode"
            placeholder="请输入租户编码"
            :disabled="model.id ? true : false"
          />
        </a-form-model-item>
        <!-- 租户名称 -->
        <a-form-model-item ref="tenantName" label="租户名称" prop="tenantName">
          <a-input v-model="form.tenantName" placeholder="请输入租户名称" />
        </a-form-model-item>
        <!-- 租户类型 -->
        <a-form-model-item
          ref="tenantTypeValue"
          label="租户类型"
          prop="tenantTypeValue"
        >
          <a-select
            v-model="form.tenantTypeValue"
            :loading="tenantTypeLoading"
            placeholder="请选择租户类型"
          >
            <a-select-option
              :value="item.dicValue"
              v-for="(item, index) in tenantTypeSource"
              :key="index"
            >
              {{ item.dicDesc }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 超管账号 -->
        <a-form-model-item
          ref="tenantSuperAccount"
          label="超管账号"
          prop="tenantSuperAccount"
        >
          <a-select
            v-model="form.tenantSuperAccount"
            placeholder="请选择超管账号"
            :loading="superTenantLoading"
          >
            <a-select-option
              :value="item.id"
              v-for="(item, index) in superTenantSource"
              :key="index"
            >
              {{ item.userName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="loading" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
//【新增根节点】
import { notificationTip } from "@/utils";
import { getDictList } from "@/api/user-center/organizationManage.js";
import {
  getTenantManageAdd,
  getSuperTenant,
  getTenantDetails,
} from "@/api/user-center/tenantManage.js";
export default {
  name: "addRootNodeModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getTenantTypeList();
          this.getSuperTenantList();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //租户名称
        tenantName: "",
        //租户编码
        tenantCode: "",
        //租户类型
        tenantTypeValue: undefined,
        //超管账号
        tenantSuperAccount: undefined,
      },
      formLoading: false,
      rules: {
        tenantTypeValue: [{ required: true, message: "请选择租户类型" }],
        tenantCode: [{ required: true, message: "请输入租户编码" }],
        tenantName: [{ required: true, message: "请输入租户名称" }],
      },
      //超管账号下拉框
      superTenantSource: [],
      superTenantLoading: false,
      //租户类型
      tenantTypeSource: [],
      tenantTypeLoading: false,
    };
  },
  mounted() {},
  methods: {
    //查询租户类型
    getTenantTypeList() {
      this.tenantTypeLoading = true;
      getDictList({ dictKey: "tenantType" })
        .then((res) => {
          let { data } = res;
          this.tenantTypeSource = data.result || [];
        })
        .catch((_) => {
          this.tenantTypeSource = [];
        })
        .finally((_) => {
          this.tenantTypeLoading = false;
        });
    },

    //查询超管账号下拉框
    getSuperTenantList() {
      this.superTenantLoading = true;
      getSuperTenant("")
        .then((res) => {
          let { data } = res;
          this.superTenantSource = data.result || [];
        })
        .catch((_) => {
          this.superTenantSource = [];
        })
        .finally((_) => {
          this.superTenantLoading = false;
        });
    },

    getDetail() {
      this.formLoading = true;
      let { id } = this.model;
      getTenantDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form = {
            //租户名称
            tenantName: result.tenantName,
            //租户编码
            tenantCode: result.tenantCode,
            //租户类型
            tenantTypeValue: Number(result.tenantTypeValue),
            //超管账号
            tenantSuperAccount: result.tenantSuperAccount
              ? result.tenantSuperAccount
              : undefined,
          };
        })
        .catch((_) => {})
        .finally((_) => {
          this.formLoading = false;
        });
    },

    //提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let { form } = this;
          let { id } = this.model;
          let formJson = {
            //租户名称
            tenantName: form.tenantName,
            //租户编码
            tenantCode: form.tenantCode,
            //租户类型
            tenantTypeValue: form.tenantTypeValue,
            //超管账号
            tenantSuperAccount: form.tenantSuperAccount
              ? form.tenantSuperAccount
              : "",
            sysProject: {},
          };
          if (id) {
            formJson.id = id;
          }
          getTenantManageAdd(formJson)
            .then((res) => {
              let msg = "新增根节点成功！";
              if (id) {
                msg = "编辑根节点成功！";
              }
              notificationTip("success", msg);
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },
    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    resetForm() {
      this.form = {
        //租户名称
        tenantName: "",
        //租户编码
        tenantCode: "",
        //租户类型
        tenantTypeValue: undefined,
        //超管账号
        tenantSuperAccount: undefined,
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 80px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
